<template>
  <transition name="bounce">
    <section class="mui-content pd">
      <mh-header headName="互动详情"> </mh-header>
      <div class="theme-banner">
        <img v-if='info.image' :src="info.image" alt="banner">
      </div>
      <div class="info-part">
        <div class="info-head">活动信息</div>
        <div class="info-inner">
          <p>时间: <span v-text="info.start_time">-</span></p>
          <p>主题: <span v-text="info.theme">-</span></p>
          <p>地点: <span v-text="info.activity_address">-</span></p>
          <p>入住酒店: <span v-text="info.hotel">-</span></p>
          <p>出发地: <span v-text="info.setout_address">-</span></p>
          <p>目的地: <span v-text="info.destination">-</span></p>
        </div>
      </div>
      <div class="map-distance flex-bt">
        <span>
          <img src="../../assets/images/ico/ic_in_mapw.png" alt="距离">
          距离我1.3km
        </span>
        <button class="mui-btn mui-btn-mini">查看地图</button>
      </div>
      <div class="info-part">
        <div class="info-head">活动流程</div>
        <div class="info-inner">
          <p>{{info.process}}</p>
<!--           <p>Part1: 签到，开始入场</p>
          <p>Part2：破冰游戏</p>
          <p>Part3：2018版趣味自我介绍</p>
          <p>Part4：浪漫交流，每个人了解优质异性的机会</p>
          <p>Part5：破冰游戏</p>
          <p>Part6：2018版趣味自我介机会</p>
          <p>1.我该找怎样的对象</p>
          <p>2.我该找怎样的对象</p>
          <p>3.我该找怎样的对象</p> -->
        </div>
      </div>
      <div class="theme-banner">
        <img v-if='info.illustration' :src="info.illustration" alt="banner">
      </div>
      <div class="info-part">
        <div class="info-head">活动氛围</div>
        <div class="info-inner">
          <p>{{info.activity_info}}</p>
<!--           <p>这里是活动氛围内容.....</p>
          <p>这里是活动氛围内容.....</p>
          <p>这里是活动氛围内容.....</p> -->
        </div>
      </div>
      <div class="info-part">
        <div class="info-head">活动报名</div>
        <div class="info-inner">
          <p>活动经费: <span>￥{{info.funds || 0}}/人</span></p>
          <p>联系方式: <span>请添加微信ldd23345、1345525</span></p>
        </div>
      </div>
      <div class="info-part">
        <div class="info-head">已报名</div>
        <div class="info-inner">
          <ul class="interacter flex-bt">
            <li v-for="item in interacter">
              <div class="inter-avatar">
                <img :src="item.avatar" alt="已报名">
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="info-part mui-text-center">
        <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1750833952,2529388352&fm=58&bpow=380&bpoh=380" width="40%" alt="红娘二维码">
        <p>扫码加红娘了解更多哦</p>
      </div>
      <div class="info-part">
        <ul class="mui-table-view mh-mg-tb">
          <li class="mui-table-view-cell" @tap="chooseTransport">
            <a class="mui-navigate-right cell-label">交通方式</a>
            <span class="cell-tip" ref="transport">请选择交通方式</span>
          </li>
        </ul>
      </div>
      <div class="info-part">
        <div class="info-inner">
          <h4 class="info-tit">活动说明</h4>
          <p>1.本次活动费用用于活动经费，其他餐饮购物费用为自费。</p>
          <p>2.本次活动最终解释权归美荷所有。</p>
          <p>3.报名费包含保险费用5</p>
        </div>
      </div>

      <div class="mui-text-center vote-part">
        <p class="text-pink" v-if='info.is_vote==1'>红娘已激活投票</p>
        <p>截止时间：{{info.sign_stime}}-{{info.sign_etime}}</p>
        <button v-if='info.is_vote==1' type="button" @tap="joinVote">参与投票</button>
      </div>

      <div class="foot-guide">
        <div class="mh-btn-light">咨询</div><div class="mh-btn-dark" @tap='submit'>报名</div>
      </div>
    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  import {MH_API} from "@/api/api";
  export default {
    name: "interact-detail-travel",
    data () {
      return {
        info: {},
        banner: [
          'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1902436551,1731327698&fm=26&gp=0.jpg',
          'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2846630249,742490264&fm=26&gp=0.jpg'
        ],
        interInfo: {
          time: '6月1日周六下午2:00',
          theme: '白领单身精品相亲交友活动',
          address: '浦东新区张杨路188号B栋',
          hotel: '上海万豪国际酒店',
          dep: '神龙广场',
          destination: '上海市浦东新区川沙新镇【迪士尼乐园】'
        },
        interacter: [
          {
            id: '1',
            avatar: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1754500502,3083345093&fm=26&gp=0.jpg'
          },
          {
            id: '2',
            avatar: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2111158800,3957537926&fm=26&gp=0.jpg'
          },
          {
            id: '3',
            avatar: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=352780618,1135735062&fm=26&gp=0.jpg'
          },{
            id: '4',
            avatar: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3621903514,273149706&fm=26&gp=0.jpg'
          },
          {
            id: '5',
            avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2406116651,3272366490&fm=26&gp=0.jpg'
          },
          {
            id: '6',
            avatar: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3771123862,2574232720&fm=26&gp=0.jpg'
          }
        ],
        selectTransport: {},
        transportation: [
          {
            text: '大巴车',
            value: '1'
          },
          {
            text: '轿车',
            value: '2'
          }
        ]
      }
    },
    methods: {
      chooseTransport () {
        let _self = this;
        let picker = new mui.PopPicker();
        picker.setData(this.transportation);
        picker.show(function (selectItems) {
          // console.log(selectItems[0].text);
          // console.log(selectItems[0].value);
          _self.selectTransport = selectItems[0];
          _self.$refs['transport'].innerText = _self.selectTransport.text;
          picker.dispose()
        })
      },
      joinVote () {
        let id = this.id;
        this.$router.push({
          path: `/interact/vote/${id}`,
          params: {
            id: id
          }
        })
      },
      submit(){
        let self = this;
        MH_API.putActivity({
          id: self.id
        }).then(res => {
          if (res.status === 200) {
            mui.toast('报名成功');
          }
          else{
            mui.toast(res.msg);
          }
        })
      }
    },
    components: {
      MhHeader
    },
    created(){
      let self = this;
      console.log(this.$route.params)
      let id = this.$route.params.id;
      this.id = id;
      this.type = this.$route.params.type;
      MH_API.viewActives({
        id: id,
        is_hong: 0
      }).then(res => {
        if (res.status === 200) {
          self.info = res.data;
          self.interacter = res.data.signup_list;
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  .mui-content {padding-bottom: 3.7rem;}
  .theme-banner {
    img {width: 100%;}
  }
  .info-part {
    border: 1px solid #fff;
    background: #fff;
  }
  .info-inner {
    padding: 0 1.5rem .5rem;
    p {
      color: #666;
      font-size: 1.2rem;
    }
  }
  .info-head {
    position: relative;
    display: inline-block;
    line-height: 3rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 0 1.5rem;
    background: #de73a4;
    color: #fff;
    font-size: 1.5rem;
    &:after {
      content: '';
      position: absolute;
      border-left: 1rem solid #de73a4;
      border-top: 1.5rem solid transparent;
      border-bottom: 1.5rem solid transparent;
      right: -1rem;
      top: 0;
    }
  }
  .map-distance {
    position: relative;
    padding: .5rem 1.5rem;
    background: url("../../assets/images/bg/bg_map.png") no-repeat left top;
    background-size: 100% 100%;
    font-size: 1.2rem;
    color: #fff;
    img {height: 2.2rem;}
    span {display: inline-block;}
  }
  .interacter {
    flex-flow:row wrap;
    li {
      display: inline-block;
      margin-bottom: 1rem;
      width: 20%;
    }
    .inter-avatar {
      width: 4.8rem;
      height: 4.8rem;
    }
    img {
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
  }
  .cell-label {
    font-size: 1.4rem;
    color: #666;
  }
  .cell-tip {
    position: absolute;
    right: 40px;
    top: 10px;
    color: #aaa;
    font-size: 1.4rem;
  }
  .info-tit {margin-bottom: .5rem; font-size: 1.4rem;}
  .foot-guide {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    div {
      display: inline-block;
      width: 50%;
      padding: 1rem 0;
      color: #fff;
      font-size: 1.7rem;
      text-align: center;
      box-sizing: border-box;
    }
    .mh-btn-light {background: #f5a9bf;}
    .mh-btn-dark {background: #eb537f;}
  }
  .vote-part {
    padding: 1rem;
    background: #fff;
    .text-pink {
      margin-bottom: .8rem;
      font-size: 1.5rem;
      color: #e685aa;
    }
    button {
      margin: 2rem 0;
      padding: .4rem .75rem;
      border: 1px solid #e685aa;
      border-radius: 1.25rem;
      font-size: 1.2rem;
      color: #e685aa;
    }
  }
</style>
